
<template>
  <div ref="bottom1_container" style="height: 95%"></div>
</template>
<script>
import { Pie } from '@antv/g2plot';
export default {
  data(){
    return{
      dataArr:[
        { type: '分类一', value: 27 },
  { type: '分类二', value: 25 },
  { type: '分类三', value: 18 },
  { type: '分类四', value: 15 },
  { type: '分类五', value: 10 },
  { type: '其他', value: 5 },
      ]
     }
  },
  mounted(){
   this.initChart()
  },
  methods:{
    initChart(){
      const piePlot = new Pie(this.$refs.bottom1_container, {
  appendPadding: 10,
  data:this.dataArr,
  angleField: 'value',
  colorField: 'type',
  radius: 0.8,
  label: {
    type: 'outer',
    content: '{name} {percentage}',
  },
  interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
});

piePlot.render();
    }

  }
}
</script>
<style scoped>

</style>